<template>
  <div class="BlogCategory-container" v-loading="isLoading">
    <h2 v-if="data.length != 0">文章分类</h2>
    <RightList
      v-if="data.length != 0"
      :list="list"
      @select="handleSelect"
    ></RightList>
  </div>
</template>

<script>
import RightList from "@/views/Blog/components/RightList.vue";
import fetchData from "@/mixins/fetchData.js";
import { getBlogsTypes } from "@/api/blog.js";
export default {
  mixins: [fetchData([])],
  components: {
    RightList,
  },
  created(){
    window.xx = getBlogsTypes;
  },
  computed: {
    categoryId() {
      return +this.$route.params.categoryId || -1;
    },
    limit() {
      return +this.$route.query.limit || 10;
    },
    list() {
      const total =
        this.data.length == 0
          ? 0
          : this.data.reduce((a, b) => {
              return a + b.articleCount;
            }, 0);
      const result = [
        { name: "全部", id: -1, articleCount: total },
        ...this.data,
      ];
      return result.map((item) => ({
        ...item,
        isSelect: item.id === this.categoryId,
        aside: item.articleCount,
      }));
    },
  },
  methods: {
    async fetchData() {
      const data = await getBlogsTypes();
      // console.log(data)
      return data;
    },
    handleSelect(item) {
      if (!item.isSelect) {
        const query = {
          page: 1,
          limit: this.limit,
        };
        if (item.id == -1) {
          //全混合分类页面
          this.$router.push({
            name: "Blog",
            query,
          });
        } else {
          this.$router.push({
            name: "CategoryBlog",
            query,
            params: {
              categoryId: item.id,
            },
          });
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/mixin.less";
.BlogCategory-container {
  width: 240px;
  padding-left: 12px;
  border-left: 1px solid #e3e3e3;
  height: 100%;
  overflow: auto;
  .self-scroll();
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>